
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="${pageContext.request.contextPath}/"/>
    <title>menu</title>
    <link rel="stylesheet" href="static/js/layui/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/layui/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>

<div class="layuimini-container">
    <div class="layuimini-main">

<%--        <div>--%>
<%--            <div class="layui-btn-container">--%>
<%--                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>--%>
<%--                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>--%>
<%--            </div>--%>
<%--            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>--%>


            <table class="layui-table" lay-data="{
                    height:450,
                    url:'menu/queryMenu',
                    page: true,
                    toolbar:'#toolbarDemo',
                    id:'test'
                    }"
                   lay-filter="munu-table">
                <thead>
                <tr>
                    <th lay-data="{checkbox:true}">选择</th>
                    <th lay-data="{field:'menuId', width:80}">ID</th>
                    <th lay-data="{field:'title', width:80}">标题</th>
                    <th lay-data="{field:'href', width:80}">地址</th>
                    <th lay-data="{field:'target'}">目标</th>
                    <th lay-data="{field:'pMenuId'}">菜单ID</th>
                    <th lay-data="{field:'creatUser'}">创建者</th>
                    <th lay-data="{field:'creatDate'}">创建时间</th>
                    <th lay-data="{field:'updateUser'}">更新者</th>
                    <th lay-data="{field:'updateDate'}">更新时间</th>
                    <th lay-data="{minWidth:150,toolbar:'#auth-state',align:'center'}">操作列</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>



<!-- 操作列 -->
<script type="text/html" id="auth-state">
        <c:if test="${sessionScope.btnRights.cdEdit eq 1}">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
        </c:if>

        <c:if test="${sessionScope.btnRights.cdDel eq 1}">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </c:if>

</script>
<%--添加--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <c:if test="${sessionScope.btnRights.cdAdd eq 1}">
            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> <i class="layui-icon">&#xe654;</i>添加 </button>
        </c:if>
        <c:if test="${sessionScope.btnRights.cdDelBatch eq 1}">
            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">  <i class="layui-icon">&#xe67e;</i>批量删除</button>
        </c:if>
        <c:if test="${sessionScope.btnRights.cdExport eq 1}">
            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="export"> <i class="layui-icon">&#xe67d;</i>  导出excel </button>
        </c:if>

    </div>
</script>

<script src="static/js/layui/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="static/js/layui/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'treetable','laypage'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var laypage = layui.laypage;

            //执行一个laypage实例
            laypage.render({
                elem: 'test' //注意，这里的 test1 是 ID，不用加 # 号
                ,count: 50 //数据总数，从服务端得到
            });

        /**
         * toolbar监听事件 添加列
         */
        table.on('toolbar(munu-table)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加菜单',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['70%', '60%'],
                    content: 'menu/toAddMenu',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听批量删除操作

                var checkStatus = table.checkStatus('test')
                    , data = checkStatus.data;
                console.log(data.length);
                    let mIds = [];
                $.each(data,function(i,n){
                   mIds.push(n.menuId);
                });
                    layer.confirm('确定要删除吗?',function (index) {
                        $.ajax({
                            type:'post',
                            url:'menu/deleteBatch',
                            data:{"menuIds":mIds},
                            datatype:"json",
                            success:function (json){
                                if (json.statusCode==200){
                                    var index = layer.alert(json.message, {
                                        title: '提交信息'
                                    }, function () {
                                        // 关闭弹出层
                                        layer.close(index);
                                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                                        parent.layer.close(iframeIndex);
                                        //局部刷新
                                        layui.table.reload("test");
                                    });
                                }else if (json.statusCode==300){
                                    layer.msg(json.message,2000);
                                }
                            }
                        })
                    });

                // layer.alert(JSON.stringify(data));
            } else if (obj.event === 'export') {

                var date =new Date();
                console.log(date)
                var index = layer.open({
                    type: 2,
                    content: 'menu/exportExcel'
                });
            console.log(index);
                layer.close(index);
            }
        });

        // //监听工具条
        table.on('tool(munu-table)', function (obj) {
            var $ = layui.jquery;
            var datatable = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'del') {
                var checkStatus = table.checkStatus('munu-table')
                    , data = checkStatus.data;
                layer.confirm('确定要删除吗?',function (index) {
                    $.ajax({
                        type:'post',
                        url:'menu/delMenu?menuId='+datatable.menuId,
                        datatype:"json",
                        success:function (json){
                            if (json.statusCode==200){
                                var index = layer.alert(json.message, {
                                    title: '提交信息'
                                }, function () {
                                    // 关闭弹出层
                                    layer.close(index);
                                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(iframeIndex);
                                    //局部刷新
                                    layui.table.reload("test");

                                });
                            }
                        }
                    })
                })

            } else if (layEvent === 'edit') {
                var $ = layui.jquery;
                var datatable = obj.data;
                var index = layer.open({
                    title: '编辑菜单',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'menu/toUpdate?menuId='+datatable.menuId
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }

        });
    });
</script>
</body>
</html>
